<template>
  <div class="login-wrapper">
    <el-header class="header">
      <!-- <Logo /> -->
    </el-header>
    <div class="login-container">
      <div class="login-left hidden-sm-and-down">
        <div class="login-left-wrap">
          <img class="img" src="../../assets/login.png" alt="login-bg" />
          <h2 class="desc">{{ config.system.name }}后台管理系统</h2>
          <p class="tip">描述信息</p>
        </div>
      </div>
      <div class="login-form">
        <div class="form-warp">
          <el-tabs v-model="a">
            <el-tab-pane name="first" label="登 录">
              <LoginForm />
            </el-tab-pane>
            <el-tab-pane name="second" label="注 册">
              <RegisterForm />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import LoginForm from "./comp/LoginForm.vue";
import RegisterForm from "./comp/RegisterForm.vue";
import config from "@/configs/globalConfig";

const a = ref("first");
</script>

<style scoped>
.login-wrapper {
  position: relative;
}

.login-wrapper .header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  color: #fff;
  background: transparent;
}

.login-wrapper .header .logo {
  justify-content: start;
}

.login-wrapper .header .logo :deep(.logo-title) {
  color: #fff !important;
}

.login-wrapper .header .lang:hover {
  background: transparent;
}

.login-wrapper .login-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #293246;
}

.login-wrapper .login-container .login-left {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50vw;
  height: 100%;
  background-image: url("../../assets/loginbg.svg");
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: auto 100%;
}

.login-wrapper .login-container .login-left-wrap {
  height: 80vh;
  margin: auto;
}

.login-wrapper .login-container .login-left-wrap .img {
  width: 280px;
  margin-top: 10vh;
}

.login-wrapper .login-container .login-left-wrap .title,
.login-wrapper .login-container .login-left-wrap .desc {
  max-width: 500px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1.2px;
}

.login-wrapper .login-container .login-left-wrap .desc {
  font-size: 28px;
}

.login-wrapper .login-container .login-left-wrap .tip {
  color: #fff;
}

.login-wrapper .login-container .login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vw;
  height: 100vh;
}

.login-wrapper .login-container .login-form .form-warp {
  width: 400px;
  padding: 1rem 3rem 0 3rem;
  margin: auto;
  background-color: #fff;
  border-radius: 8px;
}

.login-wrapper .login-container .login-form.is-mobile {
  width: 100%;
}

.login-wrapper .login-container .login-form.is-mobile .form-warp {
  width: 100%;
  margin: 0 15px;
}
</style>
